import 'package:flutter/material.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_navigation/src/extension_navigation.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';
import 'package:get/get_utils/src/extensions/internacionalization.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/modules/devices/controllers/choose_scene_controller.dart';
import 'package:mziot/app/tools/tools.dart';
import 'package:mziot/generated/locales.g.dart';

class PopFiledView extends GetView {
  PopFieldController controller = PopFieldController();
  final ValueChanged<String> nameChange;
  PopFiledView(this.nameChange);

  @override
  Widget build(BuildContext context) {
    FocusScope.of(context).requestFocus(controller.focusNode);

    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Colors.black.withAlpha(60),
      body: Stack(
        children: [
          GestureDetector(
            behavior: HitTestBehavior.translucent,
            child: Container(),
            onTap: () {
              FocusScope.of(Get.context!).unfocus();
              Get.back();
            },
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.white,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(height: 16),
                  Text(
                    LocaleKeys.devices_name.tr,
                    style: MFont.semi_Bold17.apply(color: MColor.xFF333333),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 16),
                  _textFiled,
                  SizedBox(height: 8),
                  _bottomView,
                  SizedBox(height: 16),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  get _textFiled {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: TextField(
        controller: controller.editingController,
        focusNode: controller.focusNode,
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          labelStyle: MFont.regular15.apply(color: MColor.xFF333333),
          filled: true,
          fillColor: MColor.xFFEEEEEE,
          contentPadding: EdgeInsets.zero,
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MColor.xFFEEEEEE, width: 0),
          ),
          constraints: BoxConstraints(maxHeight: 40),
        ),
        onSubmitted: (text) {
          if (text.trim().isNotEmpty) {
            logger.v('message $text');
            FocusScope.of(Get.context!).unfocus();
          }
        },
      ),
    );
  }

  get _bottomView {
    return Container(
      height: 49,
      child: Row(
        children: [
          SizedBox(width: 48),
          Expanded(
            child: TextButton(
              onPressed: () {
                FocusScope.of(Get.context!).requestFocus(FocusNode());
                Get.back();
              },
              style: ButtonStyle(
                shape: MaterialStateProperty.all(StadiumBorder()),
                backgroundColor: MaterialStateProperty.all(MColor.xFFF2F2F2),
              ),
              child: Text(
                LocaleKeys.devices_cancel.tr,
                style: MFont.regular13.apply(color: MColor.xFF333333),
              ),
            ),
          ),
          SizedBox(width: 16),
          Expanded(
            child: TextButton(
              onPressed: () {
                if (controller.editingController.text.trim().isNotEmpty) {
                  FocusScope.of(Get.context!).requestFocus(FocusNode());
                  Get.back();
                  nameChange(controller.editingController.text);
                }
              },
              style: ButtonStyle(
                shape: MaterialStateProperty.all(StadiumBorder()),
                backgroundColor: MaterialStateProperty.all(MColor.skin),
              ),
              child: Text(
                LocaleKeys.public_save.tr,
                style: MFont.regular13.apply(color: Colors.white),
              ),
            ),
          ),
          SizedBox(width: 48),
        ],
      ),
    );
  }
}
